<!-- Start of Selection -->
<template>
  <view class="content">
    <image :src="`${BASE_URL}/mine/background1.png`" style="position: absolute;width: 100%;height: 100%;z-index: -2;">
    </image>
    <view class="back" @click="back">
      <image :src="`${BASE_URL}/mine/back.png`" style="width: 60rpx;height: 60rpx;" @click="back"></image>
    </view>
    <!-- 第一行关卡 -->
    <view class="flex" style="margin-top:40rpx;">
      <view class="map_list" v-for="(item, index) in levelRows[0]" :key="index"
        @click="item.unlocked && handleItemClick(item)">
        <view class="map_detail">
          <image :src="item.unlocked ? item.image : item.image_hide"
            style="width: 250rpx;height: 200rpx;margin-bottom: 35rpx;"></image>
          <view style="font-size: 25rpx;font-weight: 500;">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- 第二行关卡 -->
    <view class="flex" style="margin-top: 40rpx;">
      <view class="map_list" v-for="(item, index) in levelRows[1]" :key="index"
        @click="item.unlocked && handleItemClick(item)">
        <view class="map_detail">
          <image :src="item.unlocked ? item.image : item.image_hide"
            style="width: 250rpx;height: 200rpx;margin-bottom: 35rpx;"></image>
          <view style="font-size: 25rpx;font-weight: 500;">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- 第三行关卡 -->
    <view class="flex" style="margin-top: 40rpx;">
      <view class="map_list" v-for="(item, index) in levelRows[2]" :key="index"
        @click="item.unlocked && handleItemClick(item)">
        <view class="map_detail">
          <image :src="item.unlocked ? item.image : item.image_hide"
            style="width: 250rpx;height: 200rpx;margin-bottom: 35rpx;"></image>
          <view style="font-size: 25rpx;font-weight: 500;">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- 第四行关卡 -->
    <view class="flex" style="margin-top: 40rpx;">
      <view class="map_list" v-for="(item, index) in levelRows[3]" :key="index"
        @click="item.unlocked && handleItemClick(item)">
        <view class="map_detail">
          <image :src="item.unlocked ? item.image : item.image_hide"
            style="width: 250rpx;height: 200rpx;margin-bottom: 35rpx;"></image>
          <view style="font-size: 25rpx;font-weight: 500;">{{ item.title }}</view>
        </view>
      </view>
    </view>

    <view v-if="showModal" class="ModalStyle" @click="showModal = false">
      <image :src="modalImage" style="width: 90%;height: 100%;"></image>
    </view>

  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { BASE_URL } from "../../../utils/api";

// 关卡基础信息
const levelBaseInfo = [
  {
    title: '苏伟埃政府纪念馆',
    image: `${BASE_URL}/mine/level/map1.svg`,
    image_hide: `${BASE_URL}/mine/level/map1_hide.svg`,
    story: `${BASE_URL}/mine/level/story1.svg`
  },
  {
    title: '佗城',
    image: `${BASE_URL}/mine/level/map2.svg`,
    image_hide: `${BASE_URL}/mine/level/map2_hide.svg`,
    story: `${BASE_URL}/mine/level/story2.svg`
  },
  {
    title: '龙川县博物馆',
    image: `${BASE_URL}/mine/level/map3.svg`,
    image_hide: `${BASE_URL}/mine/level/map3_hide.svg`,
    story: `${BASE_URL}/mine/level/story3.svg`
  },
  {
    title: '龙川县图书馆',
    image: `${BASE_URL}/mine/level/map4.svg`,
    image_hide: `${BASE_URL}/mine/level/map4_hide.svg`,
    story: `${BASE_URL}/mine/level/story4.svg`
  },
  {
    title: '杂技木偶山歌艺术团',
    image: `${BASE_URL}/mine/level/map5.svg`,
    image_hide: `${BASE_URL}/mine/level/map5_hide.svg`,
    story: `${BASE_URL}/mine/level/story5.svg`
  },
  {
    title: '龙川杂技团',
    image: `${BASE_URL}/mine/level/map6.svg`,
    image_hide: `${BASE_URL}/mine/level/map6_hide.svg`,
    story: `${BASE_URL}/mine/level/story6.svg`
  },
  {
    title: '霍山',
    image: `${BASE_URL}/mine/level/map7.svg`,
    image_hide: `${BASE_URL}/mine/level/map7_hide.svg`,
    story: `${BASE_URL}/mine/level/story7.svg`
  },
  {
    title: '黄居仁故居',
    image: `${BASE_URL}/mine/level/map8.svg`,
    image_hide: `${BASE_URL}/mine/level/map8_hide.svg`,
    story: `${BASE_URL}/mine/level/story8.svg`
  },
  {
    title: '龙川文化地标',
    image: `${BASE_URL}/mine/level/map9.svg`,
    image_hide: `${BASE_URL}/mine/level/map9_hide.svg`,
    story: `${BASE_URL}/mine/level/story9.svg`
  },
];

// 关卡数据（包含解锁状态）
const levels = ref([]);

// 4行，每行2-3个关卡
const levelRows = ref([[], [], [], []]);

let showModal = ref(false);
let modalImage = ref('');

// 点击关卡时，显示对应的图片
const handleItemClick = (item) => {
  if (!item.unlocked) return;
  modalImage.value = item.story || '';
  showModal.value = true;
};

function back() {
  uni.switchTab({
    url: '/pages/mine/mine',
    success: (res) => {
      console.log("跳转成功");
    },
    fail: (err) => {
      console.error("跳转失败", err);
    }
  });
}

// 页面加载时获取全局gameLevels并组装数据
onMounted(() => {
  // 获取全局gameLevels
  let gameLevels = uni.getStorageSync('gameLevels') || []
  console.log(gameLevels);

  // 组装关卡数据
  levels.value = levelBaseInfo.map((info, idx) => {
    const levelStatus = gameLevels[idx] || {};
    // 只根据completed来判断unlocked
    return {
      ...info,
      unlocked: !!levelStatus.completed,
      completed: !!levelStatus.completed,
      index: idx
    };
  });

  // 分4行显示（每行2-3个）
  // 这里假设前2行各2个，后2行各2-3个（可根据实际需求调整）
  // 这里按2,2,2,3分组
  levelRows.value = [
    levels.value.slice(0, 2),
    levels.value.slice(2, 4),
    levels.value.slice(4, 6),
    levels.value.slice(6, 8)
  ];
});
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  position: relative;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.map_list {
  width: 80%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.map_detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90%;
}

.flex {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.lock-overlay {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  /* 可选：添加半透明遮罩 */
  z-index: 3;
  /* 确保在顶层 */
}

.back {
  display: flex;
  width: 100%;
  height: 10%;
  margin-top: 60rpx;
}

.ModalStyle {
  width: 100%;
  height: 100%;
  background-color: rgba(110, 107, 97, 0.4);
  position: absolute;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
